<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>

    <style>
      div{
        border:1px solid red;
      }
      #div1{
        width: 200px;
        height: 200px;
      }
      #div2{
        width: 100px;
        height: 100px;
      }
      #div3{
        width: 100px;
        height: 100px;
      }

    </style>
</head>
<body>

    <div id="div1">
      <div id="div2">div2</div>
      div1
    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
<!--    <input type="button" value="删除子节点" id="del">-->
    <a href="javascript:void(0);" id="add">添加子节点</a>

    <script>
      //1.获取超链接
      var element_a = document.getElementById("del");
      //2.绑定单击事件
      element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
      }

      //1.获取超链接
      var element_add = document.getElementById("add");
      //2.绑定单击事件
      element_add.onclick = function(){
        var div1 = document.getElementById("div1");
        //给 div1 添加子节点
        //创建 div 节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        div1.appendChild(div3);
      }
      /**
       * 超链接功能：
       *    1.可以被点击：样式
       *    2.点击后跳转到 href 指定的 URL
       *
       * 需求：保留 1 功能，去掉 2 功能
       * 实现：href="javascript:void(0);"
       */

      var div2 = document.getElementById("div2");
      var div1 = div2.parentNode;
      alert(div1);

    </script>

</body>
</html>